<template>
  <div class="lobbyDetails">
    <!--<van-nav-bar title="任务详情" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>-->
    <van-tabs v-model="active" color="#FDC12C" :line-height="height" :line-width="width" title-active-color="#FDC12C"
              swipeable :lazy-render="false">

      <van-tab title="任务简介">
        <dw-task-intro :form="form" :user_task_id="user_task_id"></dw-task-intro>
      </van-tab>
      <van-tab title="详情流程">
        <dw-detailed-process :form="form.process_step"></dw-detailed-process>
      </van-tab>
    </van-tabs>
    <div class="btn" v-if="!user_task_id">
      <input type="button" :value="btnValue" :class="0 == form.ex_status? 'active':'inputBg'"
             @click="onsubmit(form.ex_status)">
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/15 11:17.
   */
  import {Dialog} from 'vant';
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'
  import dwTaskIntro from './taskIntro.vue';
  import dwDetailedProcess from './detailedProcess.vue';

  export default {
    mounted() {
      this.task_id = this.$route.query.task_id;
      if (this.task_id) {
        this.loadData();
      }
      this.user_task_id = this.$route.query.user_task_id;
      if (this.user_task_id) {
        this.mytaskDetail()
      }

    },
    components: {
      dwTaskIntro,
      dwDetailedProcess
    },
    props: {},
    data() {
      return {
        active: 0,
        height: 2,
        width: 190,
        wechatId: utils.getCookie('wechat_id'),
        task_id: undefined,
        user_task_id: undefined,
        form: {}
      }
    },
    computed: {
      btnValue() {
        return this.form.user_score + '  |  ' + this.form.ex_msg
      }
    },
    methods: {
      loadData() {
        let params = {
          task_id: this.task_id,
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.taskDetail(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.form = res.data;
        })
      },
      mytaskDetail() {
        let params = {
          user_task_id: this.user_task_id,
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.mytaskDetail(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg)
          }
          this.form = res.data;
        })
      },
      //返回
      onClickLeft() {
        this.$router.go(-1)
      },
      onsubmit(type) {
        if (type === 0) {  //工分不足或任务过期
          return false;
        }
        Dialog.confirm({
          message: '确认兑换吗？',
          confirmButtonText: '兑换',
          confirmButtonColor: '#FDCC4A'
        }).then(() => {
          let params = {
            task_id: this.task_id,
            open_id: utils.getCookie('open_id_' + this.wechatId)
          };
          if (this.form.task_type === 3) {
            this.$router.push({path: '/detailsAddress', query: {task_id: this.task_id}});
            return;
          }
          Indicator.open('加载中...');
          this.$axios.taskExchange(params).then(res => {
            Indicator.close();
            if (res.errcode !== '000') {
              this.$toast(res.errmsg);
              return false;
            }
            this.$toast(res.errmsg);
            setTimeout(() => {
              this.$router.go(-1);
            }, 500)
          })
        }).catch(() => {
          // on cancel
        });

      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .lobbyDetails {
    width: 100%;
    height: 100%;
    background: white;
  }

  .btn {
    position: fixed;
    width: 100%;
    height: 1rem;
    bottom: 0rem;
    background: white;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;

    input[type='button'] {
      width: 6.96rem;
      height: .80rem;
      display: block;
      border-radius: .40rem;
      border: 0;
    }

    .active {
      background: rgba(204, 204, 204, 1) !important;
    }

    .inputBg {
      background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
    }
  }
</style>
